<template>
  <div @mouseenter="f_mouseenter" @mouseleave="f_mouseleave" class="opinio_core">
    <!-- <a-timeline-item v-for="(item, index) in opinioList" :key="item.id"
      ><a-icon
        :style="`color: ${index == opinioList.length - 1 ? '#00d2b7' : Tp_actionStyle[item.action]};`"
        slot="dot"
        type="check-circle"
      />
      <a-row>
        <a-col
          :style="`color:${index == opinioList.length - 1 ? '#00d2b7' : Tp_actionColor[item.action]};`"
          class="opinio_core_step"
          :push="1"
          :span="18"
        >
          <template v-if="item.taskname">{{ item.taskname }}</template>

          <template v-if="item.type"
            ><template v-if="item.taskname"> - </template
            ><span class="timeLineArea_operation">{{ item.type }}</span></template
          ></a-col
        >
        <a-col class="opinio_core_user" :push="2" :span="4"> {{ item.username }}</a-col>
      </a-row>
      <div class="opinio_core_remake" v-text="item.message"></div>
    </a-timeline-item> -->

    <a-timeline-item v-for="(item, index) in opinioList" :key="index">
          <a-icon
            :style="`color: ${index == opinioList.length - 1 ? '#00d2b7' : Tp_actionColor[item.action]};`"
            slot="dot"
            type="check-circle"
            class="timeLineArea_icon"
          />
          <div class="timeLineArea_item">
            <div class="timeLineArea_item_proc">
              {{ item.instname }}
            </div>
            <div class="timeLineArea_item_body">
              <div class="timeLineArea_item_body_head">
                <div class="timeLineArea_item_body_head_username">
                  {{ item.username }}
                </div>
                <div class="timeLineArea_item_body_head_time">
                  {{ item.time }}
                </div>
              </div>
              <div class="timeLineArea_item_body_step">
                <template v-if="item.taskname">{{ item.taskname }}</template>
                <template v-if="item.type">
                  <template v-if="item.taskname">： </template>
                  <span class="timeLineArea_item_body_step_type">{{ item.type }}</span>
                </template>
              </div>
              <!-- 意见 -->
              <div class="timeLineArea_item_body_content">
                {{ item.message }}
              </div>
            </div>
          </div>
        </a-timeline-item>
  </div>
</template>
<script>
import { queryComment } from '@/api/workflow/mf_MyTaskUndo.js'
import { Tp_actionStyle, Tp_actionColor } from '@/enumeration/Tp_action.js'
export default {
  data() {
    return {
      Tp_actionColor: Tp_actionColor,
      Tp_actionStyle: Tp_actionStyle,
      opinioList: [], // 意见列表
    }
  },
  created() {
    this.getProcessingRecord()
  },
  methods: {
    f_mouseleave() {
      console.log('浮框')
      this.$emit('s_mouseleave')
    },
    f_mouseenter() {
      this.$emit('s_mouseenter')
    },
    // 查询流程审批记录
    getProcessingRecord() {
      let params = {
        processinstanceid: this.$route.params.processinstanceid,
      }
      // console.log('params', params)
      queryComment(params).then((res) => {
        console.log('流程审批记录', res)
        if (res.code == 0) {
          this.opinioList = res.data || []
          this.$emit('f_findPreviousStep', this.opinioList)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.opinio_core {
  width: 400px;
  max-height: 600px;
  overflow: auto;
  background-color: #ffffff;
  position: absolute;
  right: -400px;
  top: 0;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 30px 20px 20px 30px;
  &_step {
    font-size: 16px;
    font-weight: 550;
  }
  &_user {
    margin-left: 5px;
    font-size: 14px;
    color: #7b8186;
  }
  &_remake {
    margin: 12px 0;
    font-size: 14px;
    color: #262626;
  }
}

.imageBox {
  display: flex;
  justify-content: flex-end;
}
.timeLineArea {
  width: 100%;
  margin: 0 auto;
  // border: 1px solid red;
  ::v-deep &_icon svg {
    width: 20px;
    height: 20px;
  }
  &_item {
    // border: 1px solid red;
    padding-top: 8px;
    &_proc {
      font-weight: 800;
      font-size: 16px;
      // border: 1px solid pink;
    }
    &_body {
      margin-top: 12px;
      padding: 10px 0 20px 20px;
      background-color: #f6f9fe;
      border-radius: 10px;
      &_head,
      &_step,
      &_content {
        margin-top: 6px;
      }
      &_head {
        color: #2f2f2f;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        &_username {
          color: #2e3235;
          font-weight: 800;
          font-size: 16px;
        }
        &_time {
          // font-weight: 600;
          font-size: 16px;
          margin-right: 20px;
          color: #64676c;
        }
      }
      &_step {
        // border: 1px solid black;
        font-weight: 800;
        font-size: 16px;
        color: #929699;
        &_type {
          color: #69aa91;
        }
      }
      &_content {
        margin-left: 16px;
        font-weight: 800;
        font-size: 16px;
        color: #929699;
        // border: 1px solid blue;
      }
    }
  }
}

/deep/.ant-timeline-item-content {
  top: -16px;
  right: -16px;
}
</style>
